<template>
  <div>
    <div style="display: flex;justify-content: start;margin-bottom: 10px;">
      <div>
        参数类型：
        <el-radio-group v-model="paramType" size="mini" @change="handleData">
          <el-radio-button label="瞬时流量"></el-radio-button>
          <el-radio-button label="管网压力"></el-radio-button>
        </el-radio-group>
      </div>

      <div style="margin-left: 10px;">
        抄表时间：
        <el-date-picker size="mini"
                        v-model="freezeTimeRange"
                        type="datetimerange"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        style="width: 320px;"
                        :clearable="false"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']"
                        @change="getList">
        </el-date-picker>
      </div>
    </div>

    <div id="main" ref="main" :style="getChartBoxStyle"></div>
  </div>
</template>

<script>
import {listAllData} from "@/api/dataquery/terminal/terminalhistory.js";
import * as echarts from "echarts";
import moment from "moment/moment";

export default {
  name: "DataTrend",
  data() {
    return {
      screenHeight: null,
      currentTerminalId: null,
      terminalsDbRealtimeData: {},
      myChart: undefined,
      paramType: '瞬时流量',
      freezeTimeRange: [moment().subtract(1, 'day').format('YYYY-MM-DD 00:00:00'), moment().subtract(1, 'day').format('YYYY-MM-DD 23:59:59')],
      // 折线图继承
      chartExtend: {
        // 标题
        title: {
          text: ''
        },
        grid: {
          top: '5%',
          left: '5%',
          right: '5%',
          bottom: '6%',
          containLabel: true,
        },
        // x轴
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: [], // x轴坐标名称
        },
        // y轴
        yAxis: {
          //2022/10 /chuan 原：流量
          name: '瞬时流量(m³/h)',
          type: 'value',
          boundaryGap: true,
          axisLabel: {
            formatter: '{value} m³/h'
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#6e7079'
            }
          },
        },
        // 提示框，鼠标悬浮交互时的信息提示
        tooltip: {
          show: true,
          trigger: 'axis', // 触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {}
          }
        },
        legend: {
          data: ['瞬时流量'],
          x: 'center',
          y: 'top',
          show: true,
          padding: 20
        },
        dataZoom: [{
          start: 0,
          end: 100,
          bottom: 10,
          type: 'slider',
          showDataShadow: false,
          handleIcon: 'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          handleSize: '100%'
        }, {
          type: 'inside'
        }],
        // 指定图标的类型
        series: [],
      },
      // 查询参数
      queryParams: {
        terminalId: null,
        params: {
          startTime: moment(new Date()).format('YYYY-MM-DD 00:00:00'),
          endTime: moment(new Date()).format('YYYY-MM-DD 23:59:59')
        },
      },
      historyData: []
    }
  },
  created() {
    this.screenHeight = document.body.clientHeight
  },
  computed: {
    getChartBoxStyle() {
      return {width: '100%', height: (this.screenHeight - 200) + 'px'}
    }
  },
  methods: {
    updateTerminalId(terminalId) {
      this.queryParams.terminalId = terminalId
    },
    // 初始化echarts
    initEcharts() {
      if (this.myChart) {
        this.myChart.dispose()
      }
      this.myChart = echarts.init(this.$refs.main)
      this.myChart.setOption(this.chartExtend, true)
      this.myChart.resize()
      window.addEventListener('resize', () => {
        this.myChart.resize()
      })
    },
    handleData() {
      let xAxisData = this.historyData.map(item => item.readDate)
      let seriesItem = {data: []}
      let option = JSON.parse(JSON.stringify(this.chartExtend))
      if (this.paramType === '瞬时流量') {
        seriesItem.name = '瞬时流量'
        seriesItem.type = 'bar'
        option.yAxis.name = '瞬时流量(m³/h)'
        option.yAxis.formatter = '{value} m³/h'
        this.historyData.forEach(item => seriesItem.data.push(item.instantNumber))
      } else {
        seriesItem.name = '管网压力'
        seriesItem.type = 'line'
        seriesItem.smooth = true
        option.yAxis.name = '管网压力(MPa)'
        option.yAxis.formatter = '{value} MPa'
        this.historyData.forEach(item => seriesItem.data.push(item.pressure))
      }
      option.xAxis.data = xAxisData
      option.series.push(seriesItem)
      this.myChart.setOption(option)
    },
    // 获取数据
    getList() {
      if (this.freezeTimeRange.length > 0) {
        this.queryParams.params.startTime = this.freezeTimeRange[0]
        this.queryParams.params.endTime = this.freezeTimeRange[1]
      }

      this.historyData = []
      listAllData(this.queryParams).then(response => {
        if (response.data && response.data.length) {
          this.historyData = response.data
          this.handleData()
        }
      });
    },
  },
  mounted() {
    this.initEcharts()
  }
}
</script>


<style scoped lang="scss">
::v-deep .el-descriptions-item__cell.el-descriptions-item__label.is-bordered-label {
  width: 120px;
  text-align: right;
  padding: 8px;
}

::v-deep .el-descriptions-item__cell.el-descriptions-item__content {
  min-width: 150px;
  padding: 8px;
}
</style>
